import React from "react";
import { Row, Col, Card } from "antd";
import MagicValue from "../components/Magic/MagicValue";
import MagicHistory from "../components/Magic/MagicHistory";

const MagicPage = () => {
  return (
    <div style={{ padding: "24px" }}>
      <Row gutter={[24, 24]}>
        <Col xs={24} md={8}>
          <MagicValue currentValue={75} maxValue={100} />
        </Col>
        <Col xs={24} md={16}>
          <Card>
            <MagicHistory />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default MagicPage;
